(function(){
    var myChart = echarts.init(document.getElementById("widget-chart-box-1"));
    var myChart2 = echarts.init(document.getElementById("widget-chart-box-2"));

    var labelTop = {

        normal : {
            label : {
                show : true,
                position : 'center',
                formatter : '{b}',
                textStyle: {
                    baseline : 'bottom'
                }
            },
            labelLine : {
                show : false
            }

        }
    };
    var labelFromatter = {
        normal : {
            label : {
                formatter : function (params){
                    return 100 - params.value + '%'
                },
                textStyle: {
                    baseline : 'center'
                }
            }
        },
    }
    var labelBottom = {
        normal : {
            color: '#ccc',
            label : {
                show : true,
                position : 'center'
            },
            labelLine : {
                show : false
            }
        },
        emphasis: {
            color: '#ccc'
        }
    };
    var radius = [80, 70];
    option = {



        legend: {
            x : 'center',
            y : 'center',

        },

        grid: {
            x:0,
            y:0,
            x2:0,
            y2:0
        },

        toolbox: {
            show : true,
            feature : {
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            width: '20%',
                            height: '30%',
                            itemStyle : {
                                normal : {
                                    label : {
                                        formatter : function (params){
                                            return 'other\n' + params.value + '%\n'
                                        },
                                        textStyle: {
                                            baseline : 'middle'
                                        }
                                    }
                                },
                            }
                        }
                    }
                }

            }
        },
        series : [
            {
                type : 'pie',

                radius : radius,
                x: '0%', // for funnel
                itemStyle : labelFromatter,
                data : [
                    {name:'other', value:34, itemStyle : labelBottom},
                    {name:'', value:66,itemStyle : labelTop}
                ]
            }

        ],
        animation :false
    };
    option2 = {



        legend: {
            x : 'center',
            y : 'center',

        },

        grid: {
            x:0,
            y:0,
            x2:0,
            y2:0
        },

        toolbox: {
            show : true,
            feature : {
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            width: '20%',
                            height: '30%',
                            itemStyle : {
                                normal : {
                                    label : {
                                        formatter : function (params){
                                            return 'other\n' + params.value + '%\n'
                                        },
                                        textStyle: {
                                            baseline : 'middle'
                                        }
                                    }
                                },
                            }
                        }
                    }
                }

            }
        },
        series : [
            {
                type : 'pie',

                radius : radius,
                x: '0%', // for funnel
                itemStyle : labelFromatter,
                data : [
                    {name:'other', value:29, itemStyle : labelBottom},
                    {name:'', value:71,itemStyle : labelTop}
                ]
            }

        ],
        animation :false
    };


    myChart.setOption(option);
    myChart2.setOption(option2);
})();




(function(){
    var myChart = echarts.init(document.getElementById("index-pie-1"));

    option3 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['列字段','行字段','筛选','值']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'错误分布',
                type:'pie',
                radius : ['50%', '70%'],
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    },
                    emphasis : {
                        label : {
                            show : true,
                            position : 'center',
                            textStyle : {
                                fontSize : '20',
                                fontWeight : 'bold'
                            }
                        }
                    }
                },
                data:[
                    {value:33, name:'列字段'},
                    {value:1, name:'行字段'},
                    {value:13, name:'筛选'},
                    {value:5, name:'值'}
                ]
            }
        ]
    };

    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['列字段','行字段','筛选','值']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'center',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'错误分布',
                type:'pie',
                radius : ['50%', '70%'],
                itemStyle : {
                    normal : {
                        label : {
                            show : false
                        },
                        labelLine : {
                            show : false
                        }
                    },
                    emphasis : {
                        label : {
                            show : true,
                            position : 'center',
                            textStyle : {
                                fontSize : '20',
                                fontWeight : 'bold'
                            }
                        }
                    }
                },
                data:[
                    {value:33, name:'列字段'},
                    {value:11, name:'行字段'},
                    {value:13, name:'筛选'},
                    {value:15, name:'值'}
                ]
            }
        ]
    };



    myChart.setOption(option);
})();



(function(){
    var myChart = echarts.init(document.getElementById("index-bar-1"));

    option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一', '周二', '周三', '周四', '周五'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'及格率',
                type:'bar',
                barWidth: '60%',
                data:[76, 46, 61, 80, 88]
            }
        ]
    };




    myChart.setOption(option);
})();



(function(){
    var myChart = echarts.init(document.getElementById("index-line-1"));

    option = {

        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['最高分','最低分'],
            x: "right"
        },

        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['3.1','3.2','3.3','3.4','3.5','3.6','3.7']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} '
            }
        },
        series: [
            {
                name:'最高分',
                type:'line',
                data:[83, 91, 95, 83, 92, 93, 90],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低分',
                type:'line',
                data:[75, 62, 42, 65, 63, 52, 60],
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };





    myChart.setOption(option);
})();

